<template>
    <div class="right-bar">
        <div :class="[showSideBar ? 'video-sidebar-box Side-active clear' : 'video-sidebar-box clear']">
            <!-- 笔记和答疑的截图功能相关： -->
            <canvas id="myCanvas" width="1200" height="672" style="display:none;border:1px solid #d3d3d3;background:#ffffff;"></canvas>
            <template>
                <uploader style="display:none;" :options="uploadOptions" :autoStart="false" ref="uploader" :file-status-text="statusText" @file-success="fileSuccess" @file-error="fileFail" class="shot-uploader">
                </uploader>
            </template>
            <!-- 按钮 -->
            <div class="video-sidebar fl">
                <div class="video-sidebar-btn">
                    <div v-if="cutListData.length > 0" :class="[i_lab == 1 ? 'bar-tab bar-active' : 'bar-tab']" @click="clickBar(1)">
                        <i class="ipng but_bijiup"></i>
                        <p>切片</p>
                    </div>
                    <div :class="[i_lab == 2 ? 'bar-tab bar-active' : 'bar-tab']" @click="clickBar(2)">
                        <i class="ipng but_bijiup"></i>
                        <p>笔记</p>
                    </div>
                    <div :class="[i_lab == 3 ? 'bar-tab bar-active' : 'bar-tab']" @click="clickBar(3)">
                        <i class="ipng but_taolunup"></i>
                        <p>答疑</p>
                    </div>
                    <div class="videodownload" v-if="showDownLoad == 1" @click="downLoadFile">
                        <i class="ipng but_dolondup"></i>
                        <p>下载</p>
                    </div>
                </div>
            </div>
            <!-- 内容 -->
            <div class="video-sidebar-con fr">
                <!-- 答疑 -->
                <div v-show="i_lab == 3" class="common-bar question-bar">
                    <div class="question-bar-input">
                        <template>
                            <el-tabs tab-position="top">
                                <el-tab-pane label="个人问题" class="textarea-pane">
                                    <div class="textarea">
                                        <el-input type="textarea" :rows="4" resize="none" v-model.trim="personWords" maxlength="140" placeholder="请输入问题内容~"></el-input>
                                        <span class="numberWord">
                                            <i>{{ personWords.length }}</i>
                                            /140
                                        </span>
                                    </div>
                                    <div class="cut-img clear">
                                        <template>
                                            <i class="ipng but_addamage"></i>
                                            <el-checkbox v-model="imgChecked" @change="screenShot">截图</el-checkbox>
                                        </template>
                                        <el-button class="fr" size="small" type="primary" :disabled="qDisabled" @click="addQuestion">确定</el-button>
                                    </div>
                                    <div class="preson-question question-div">
                                        <ul class="comment-ul">
                                            <li class="comment-li-item clear" v-for="(item, index) of personQuestionData" :key="index">
                                                <a href="javascript:;"><img :src="BASE_URL + item.avatar_path" /></a>
                                                <div class="comment-li-box fr">
                                                    <span class="comment-user">{{ item.user_name }}</span>
                                                    <div class="comment-content">{{ item.content }}</div>
                                                    <div class="comment-li-area clear" v-show="item.id == question_id">
                                                        <div class="textarea">
                                                            <el-input type="textarea" :rows="4" resize="none" v-model.trim="editWords" maxlength="140" placeholder="请输入问题内容~"></el-input>
                                                            <span class="numberWord">
                                                                <i>{{ editWords.length }}</i>
                                                                /140
                                                            </span>
                                                        </div>
                                                        <el-button class="fr" size="small" type="primary" @click="sureEditQuestion">确定</el-button>
                                                    </div>
                                                    <el-card v-if="item.video_image != ''" class="img-card" shadow="hover">
                                                        <img :src="BASE_URL +'/'+ item.video_image" />
                                                        <div class="tips-word" @click="seePic(item)"><span>查看图片</span></div>
                                                    </el-card>
                                                    <div class="comment-btns-tool clear">
                                                        <span>{{ item.create_time }}</span>
                                                        <i v-if="item.create_id == user_login_id" class="ipng fr but_del i_delVideo delnote" @click="delQuestion(item)"></i>
                                                        <i v-if="item.create_id == user_login_id" class="ipng fr but_edit01 i_editVideo editnote" @click="editQuestion(item)"></i>
                                                    </div>
                                                </div>
                                                <div class="reply-tips" v-if="item.answer != undefined">
                                                    <template v-for="(item1, index1) of item.answer">
                                                        <div :key="index1">
                                                            <span>
                                                                <i class="role1" v-if="videoData.create_id == item1.create_id">{{ item1.user_name }}回复：</i>
                                                                <i v-else>{{ item1.user_name }}提问：</i>
                                                            </span>
                                                            <p>{{ item1.content }}</p>
                                                        </div>
                                                    </template>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </el-tab-pane>
                                <el-tab-pane label="大家问题" class="textarea-pane">
                                    <div class="all-question question-div">
                                        <ul class="comment-ul">
                                            <li class="comment-li-item clear" v-for="(item, index) of allQuestionData" :key="index">
                                                <a href="javascript:;"><img :src="BASE_URL + item.avatar_path" /></a>
                                                <div class="comment-li-box fr">
                                                    <span class="comment-user">{{ item.user_name }}</span>
                                                    <div class="comment-content">{{ item.content }}</div>
                                                    <div class="comment-li-area clear" v-show="item.id == question_id">
                                                        <div class="textarea">
                                                            <el-input type="textarea" :rows="4" resize="none" v-model.trim="editWords" maxlength="140" placeholder="请输入问题内容~"></el-input>
                                                            <span class="numberWord">
                                                                <i>{{ editWords.length }}</i>
                                                                /140
                                                            </span>
                                                        </div>
                                                        <el-button class="fr" size="small" type="primary" @click="sureEditQuestion">确定</el-button>
                                                    </div>
                                                    <el-card v-if="item.video_image != ''" class="img-card" shadow="hover">
                                                        <img :src="BASE_URL +'/'+ item.video_image" />
                                                        <div class="tips-word" @click="seePic(item)"><span>查看图片</span></div>
                                                    </el-card>
                                                    <div class="comment-btns-tool clear">
                                                        <span>{{ item.create_time }}</span>
                                                        <i v-if="item.create_id == user_login_id" class="ipng fr but_del i_delVideo delnote" @click="delQuestion(item)"></i>
                                                        <i v-if="item.create_id == user_login_id" class="ipng fr but_edit01 i_editVideo editnote" @click="editQuestion(item)"></i>
                                                    </div>
                                                </div>
                                                <div class="reply-tips" v-if="item.answer != undefined">
                                                    <template v-for="(item1, index1) of item.answer">
                                                        <div :key="index1">
                                                            <span>
                                                                <i class="role1" v-if="videoData.create_id == item1.create_id">{{ item1.user_name }}的回复：</i>
                                                                <i v-else>{{ item1.user_name }}的提问：</i>
                                                            </span>
                                                            <p>{{ item1.content }}</p>
                                                        </div>
                                                    </template>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </el-tab-pane>
                            </el-tabs>
                        </template>
                    </div>
                </div>
                <!--  笔记 -->
                <div v-show="i_lab == 2" class="common-bar">
                    <div class="question-bar-input">
                        <template>
                            <el-tabs tab-position="top">
                                <el-tab-pane label="个人笔记" class="textarea-pane">
                                    <div class="textarea">
                                        <el-input type="textarea" :rows="4" resize="none" v-model.trim="o_personWords" maxlength="140" placeholder="请输入笔记内容~"></el-input>
                                        <span class="numberWord">
                                            <i>{{ o_personWords.length }}</i>
                                            /140
                                        </span>
                                    </div>
                                    <div class="cut-img clear">
                                        <template>
                                            <i class="ipng but_addamage"></i>
                                            <el-checkbox v-model="o_imgChecked" @change="screenShot">截图</el-checkbox>
                                        </template>
                                        <el-button class="fr" size="small" type="primary" :disabled="nDisabled" @click="addPersonNote">确定</el-button>
                                    </div>
                                    <div class="preson-question question-div">
                                        <ul class="comment-ul">
                                            <li class="comment-li-item clear" v-for="(item, index) of personNoteData" :key="index">
                                                <a href="javascript:;"><img :src="BASE_URL + item.avatar_path" /></a>
                                                <div class="comment-li-box fr">
                                                    <span class="comment-user">{{ item.user_name }}</span>
                                                    <div class="comment-content">{{ item.content }}</div>
                                                    <div class="comment-li-area clear" v-show="item.id == note_id">
                                                        <div class="textarea">
                                                            <el-input type="textarea" :rows="4" resize="none" v-model.trim="o_editWords" maxlength="140" placeholder="请输入笔记内容~"></el-input>
                                                            <span class="numberWord">
                                                                <i>{{ o_editWords.length }}</i>
                                                                /140
                                                            </span>
                                                        </div>
                                                        <el-button class="fr" size="small" type="primary" @click="sureEditNote">确定</el-button>
                                                    </div>
                                                    <el-card v-if="item.video_image != ''" class="img-card" shadow="hover">
                                                        <img :src="BASE_URL +'/'+  item.video_image" />
                                                        <div class="tips-word" @click="seePic(item)"><span>查看图片</span></div>
                                                    </el-card>
                                                    <span class="video-cut-time" title="笔记打点/截图时间" v-if="item.video_time_string != '00:00:00'"><i class="el-icon-location-outline"></i> {{item.video_time_string}}</span>
                                                    <div class="comment-btns-tool clear">
                                                        <span>{{ item.create_time }}</span>
                                                        <i v-if="item.create_id == user_login_id" class="ipng fr but_del i_delVideo delnote" @click="delNote(item)"></i>
                                                        <i v-if="item.create_id == user_login_id" class="ipng fr but_edit01 i_editVideo editnote" @click="editNote(item)"></i>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </el-tab-pane>
                                <el-tab-pane label="大家的笔记" class="textarea-pane">
                                    <div class="all-question question-div">
                                        <ul class="comment-ul">
                                            <li class="comment-li-item clear" v-for="(item, index) of allNoteData" :key="index">
                                                <a href="javascript:;"><img :src="BASE_URL + item.avatar_path" /></a>
                                                <div class="comment-li-box fr">
                                                    <span class="comment-user">{{ item.user_name }}</span>
                                                    <div class="comment-content">{{ item.content }}</div>
                                                    <div class="comment-li-area clear" v-show="item.id == note_id">
                                                        <div class="textarea">
                                                            <el-input type="textarea" :rows="4" resize="none" v-model.trim="o_editWords" maxlength="140" placeholder="请输入问题内容~"></el-input>
                                                            <span class="numberWord">
                                                                <i>{{ o_editWords.length }}</i>
                                                                /140
                                                            </span>
                                                        </div>
                                                        <el-button class="fr" size="small" type="primary" @click="sureEditNote">确定</el-button>
                                                    </div>
                                                    <el-card v-if="item.video_image != ''" class="img-card" shadow="hover">
                                                        <img :src="BASE_URL +'/'+ item.video_image" />
                                                        <div class="tips-word" @click="seePic(item)"><span>查看图片</span></div>
                                                    </el-card>
                                                    <span class="video-cut-time" title="笔记打点/截图时间" v-if="item.video_time_string != '00:00:00'"><i class="el-icon-location-outline"></i> {{item.video_time_string}}</span>
                                                    <div class="comment-btns-tool clear">
                                                        <span>{{ item.create_time }}</span>
                                                        <i v-if="item.create_id == user_login_id" class="ipng fr but_del i_delVideo delnote" @click="delNote(item)"></i>
                                                        <i v-if="item.create_id == user_login_id" class="ipng fr but_edit01 i_editVideo editnote" @click="editNote(item)"></i>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </el-tab-pane>
                            </el-tabs>
                        </template>
                    </div>
                </div>
                <!-- 切片 -->
                <div v-show="i_lab == 1" class="common-bar">
                    <div class="cuts-part">
                        <div class="scrollBar">
                            <ul id="cut_list">
                                <li class="sectionLs clear" @click="switchSrc(cutListData[0].video_id)" v-if="cutListData[0]">
                                    <p>
                                        <img :src="BASE_URL + cutListData[0].cut_image" />
                                    </p>
                                    <p :class="[cutid == undefined ? 'c-active' : '']">
                                        完整版：{{ cutListData[0].video_name }}
                                    </p>
                                </li>
                                <template v-for="(item, index) of cutListData">
                                    <li class="sectionLs clear" @click="switchSrc(item.video_id,item.cut_id)" :key="index">
                                        <p>
                                            <img :src="BASE_URL + item.cut_image" />
                                        </p>
                                        <p :class="[item.cut_id == cutid ? 'c-active' : '']">
                                            节选：{{ item.cut_name }}
                                        </p>
                                    </li>
                                </template>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 查看图片 -->
        <el-dialog class="seePicDialog" width="60%" :visible.sync="dialogPicVisible"><img :src="BASE_URL +'/'+ see_image" /></el-dialog>
    </div>
</template>
<script>
export default {
    props: {
        videoData: {
            type: Object,
            default() {
                return {};
            }
        },
        showDownLoad: {
            type: Number,
            required: true,
            default:0
        },
        cutid: {
            type: Number,
            default:undefined,
            required: false,
        },
        videoid: {
            type: Number,
            default:0,
            required: true,
        },
    },
    data() {
        return {
             uploadOptions: {
                target: this.BASE_URL + "/api/resource/res_upload",
                headers: { Authorization: `Bearer ` + this.$g.access_token },
                testChunks: false,
                allowDuplicateUploads:true,
            },
            statusText: {
                success: "上传成功",
                error: "上传出错",
                uploading: "正在上传...",
                paused: "暂停",
                waiting: "等待上传"
            },
            uploadRetryTimes: 100, //文件最大重传次数
            showSideBar: false,
            //个人笔记：
            o_personWords: '',
            o_imgChecked: false,
            personNoteData: [],
            o_editWords: '',
            note_id: null,
            // 大家的笔记：
            allNoteData: [],
            // 个人问题：
            personWords: '',
            imgChecked: false,
            personQuestionData: [],
            editWords: '',
            question_id: null,
            video_start: 0,
            dialogPicVisible: false,
            see_image: null,
            qDisabled: false, //个人问题提交按钮重复点击禁止
            nDisabled: false, //个人笔记提交按钮重复点击禁止
            screenshotUrl:'',//截图图片路径
            //大家的问题：
            allQuestionData: [],
            i_lab: 1,
            //切片：
            cutListData: [],
            user_login_id:this.$g.user_id
        };
    },
    mounted() {
        this.getCutList();
    },
    methods: {
        switchSrc(video_id, cut_id) {
            this.$emit('switchSrc', video_id, cut_id)
        },
        //  用画布方法截图
        screenShot(e){
            if(e){
                let c=document.getElementById("myCanvas");
                // let c=document.getElementById("videobox");
                let ctx=c.getContext("2d");
                // 截图的图片来源是播放器，此处videoPlayer_html5_api是video标签的id名字，是videojs播放器自动生成的
                // let sourceImg=document.getElementById("videoPlayer_html5_api");
                let sourceImg=document.getElementsByTagName("video")[0];
                ctx.drawImage(sourceImg,0,0,1200,672);
                let pngBase64=c.toDataURL("image/png");
                // 把base64图片转成file格式
                // 由于文件上传后台是根据文件name里面的后缀名来定义返回值里面文件路径的后缀名，此处要加上图片后缀名
                let pngFile=this.dataURLtoFile(pngBase64,'个人笔记截图.png');
                // 把截图追加到上传插件
                this.$refs.uploader.uploader.addFile(pngFile);
                // 让插件上传截图
                this.$refs.uploader.uploader.resume();
            }
        },
        //将base64转换为文件
        dataURLtoFile(dataurl, filename) {
            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while(n--){
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], filename, {type:mime});
        },
        //截图上传成功
        fileSuccess(rootFile, file, message, chunk) {
            var mess = eval("(" + message + ")");
            mess = handleResponseData(mess);
            if (parseInt(mess.data.status) === 1) {
                this.screenshotUrl=mess.data.file_path;
            }
        },
        //截图上传失败
        fileFail(rootFile, file, message, chunk) {
            var mess = eval("(" + message + ")");
            if (parseInt(mess.error) === 401 && this.uploadRetryTimes > 0) {
                let callbcak = data => {
                this.uploadRetryTimes--;
                this.$refs.uploader.uploader.retry(file);
                };
                this.get_access_token(callbcak);
            } else {
                this.$message.error(mess.msg);
            }
        },
        // 右边工具栏切换按钮：
        clickBar(flagNum) {
            if (this.i_lab == flagNum) {
                this.showSideBar = !this.showSideBar;
            } else {
                this.i_lab = flagNum;
                this.showSideBar = true;
            }
            switch(flagNum){
                case 1:
                    this.getCutList();
                break;
                case 2:
                    this.getPersonNote();
                    this.getAllNote();
                break;
                case 3:
                    this.getPersonQuestion();
                    this.getAllQuestion();
                break;
            }
        },
        
        //获取切片列表
        getCutList() {
            let success = data => {
                this.cutListData=[];
                if (data.data.length > 0) {
                    data.data.forEach(item => {
                        if (item.status == '正常切片') {
                            this.cutListData.push(item);
                        }
                    });
                }
            };
            this.$ajax({
                url: 'api/video/video_cut_list',
                method: 'get',
                params: {
                    video_id: this.videoid
                },
                func: {
                    success: success
                }
            });
        },
        // 添加笔记按钮：
        addPersonNote() {

            if (this.user_login_id == 0) {
                this.$message.warning('先登陆个人账号，才能进行此操作哦~');
                return;
            }
            if (this.o_personWords == '') {
                this.$message.warning('请输入笔记内容哦~');
                return;
            }
            this.nDisabled = true;
            let success = data => {
                this.o_personWords = '';
                this.o_imgChecked = false;
                this.nDisabled = false;
                this.screenshotUrl="";
                this.getPersonNote();
                this.getAllNote();
                this.$message.success(data.msg);
            };
            let fail = data => {
                this.$message.error(data.msg);
                this.nDisabled = false;
                this.screenshotUrl="";
            };
            this.$ajax({
                url: 'api/video/video_note',
                method: 'post',
                data: {
                    userid: this.user_login_id,
                    videoid: this.videoid,
                    comment: this.o_personWords,
                    jietu: this.o_imgChecked? 1 : 0,
                    jietu_image:this.screenshotUrl=this.o_imgChecked?this.screenshotUrl:'',
                    videostart: this.$store.getters.openClassTime
                },
                func: {
                    success: success,
                    fail: fail
                }
            });
        },
        // 获取个人笔记列表
        getPersonNote() {
            let success = data => {
                this.personNoteData = data.data;
            };
            this.$ajax({
                url: 'api/video/video_note_list',
                method: 'get',
                params: {
                    userid: this.user_login_id,
                    videoid: this.videoid
                },
                func: {
                    success: success
                }
            });
        },
        // 获取大家的笔记列表
        getAllNote() {
            let success = data => {
                this.allNoteData = data.data;
            };
            this.$ajax({
                url: 'api/video/video_note_list',
                method: 'get',
                params: {
                    videoid: this.videoid
                },
                func: {
                    success: success
                }
            });
        },
        editNote(val) {
            //修改问题图标taggle效果
            if (val.id == this.note_id) {
                this.note_id = null;
            } else {
                this.note_id = val.id;
                this.o_editWords = val.content;
            }
        },
        sureEditNote() {
            if (this.o_editWords == '') {
                this.$message.warning('请输入笔记内容哦~');
                return;
            }
            let success = data => {
                // console.log(data.data);
                this.getPersonNote();
                this.getAllNote();
                this.note_id = null;
            };
            this.$ajax({
                url: 'api/video/video_note',
                method: 'put',
                data: {
                    user_id: this.user_login_id,
                    id: this.note_id,
                    content: this.o_editWords
                },
                func: {
                    success: success
                }
            });
        },
        delNote(item) {
            this.$confirm('确定要删除此条笔记吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                .then(() => {
                    let success = res => {
                        // console.log(res);
                        this.getPersonNote();
                        this.getAllNote();
                        this.$message.success('删除成功');
                    };
                    this.$ajax({
                        url: 'api/video/video_note',
                        method: 'delete',
                        params: {
                            id: item.id
                        },
                        func: {
                            success: success
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        // 添加问题按钮：
        addQuestion() {
         
            if (this.user_login_id == 0) {
                this.$message.warning('先登陆个人账号，才能进行此操作哦~');
                return;
            }
            if (this.personWords == '') {
                this.$message.warning('请输入问题内容哦~');
                return;
            }
            if (this.videoData.create_id == this.user_login_id) {
                this.personWords = '';
                this.$message.warning('您是当前视频授课老师，请不要提问自己哦~');
                return;
            }
            this.qDisabled = true;
            let success = data => {
                this.personWords = '';
                this.imgChecked = false;
                this.qDisabled = false;
                this.screenshotUrl="";
                this.getPersonQuestion();
                this.getAllQuestion();
                this.$message.success(data.msg);
            };
            let fail = data => {
                this.qDisabled = false;
                this.screenshotUrl="";
                this.$message.error(data.msg);
            };
            this.$ajax({
                url: 'api/video/video_question',
                method: 'post',
                data: {
                    userid: this.user_login_id,
                    videoid: this.videoid,
                    comment: this.personWords,
                    jietu: this.imgChecked? 1 : 0,
                    jietu_image:this.screenshotUrl=this.imgChecked?this.screenshotUrl:'',
                    videostart: this.$store.getters.openClassTime
                },
                func: {
                    success: success,
                    fail: fail
                }
            });
        },
        // 获取个人问题列表
        getPersonQuestion() {
            let success = data => {
                this.personQuestionData = data.data;
            };
            this.$ajax({
                url: 'api/video/video_question_list',
                method: 'get',
                params: {
                    userid: this.user_login_id,
                    videoid: this.videoid
                },
                func: {
                    success: success
                }
            });
        },
        // 获取大家的问题列表
        getAllQuestion() {
            let success = data => {
                this.allQuestionData = data.data;
            };
            this.$ajax({
                url: 'api/video/video_question_list',
                method: 'get',
                params: {
                    videoid: this.videoid
                },
                func: {
                    success: success
                }
            });
        },
        editQuestion(val) {
            //修改问题图标taggle效果
            if (val.id == this.question_id) {
                this.question_id = null;
            } else {
                this.question_id = val.id;
                this.editWords = val.content;
            }
        },
        sureEditQuestion() {
            if (this.editWords == '') {
                this.$message.warning('请输入问题内容哦~');
                return;
            }
            let success = data => {
                // console.log(data.data);
                this.getPersonQuestion();
                this.getAllQuestion();
                this.question_id = null;
            };
            this.$ajax({
                url: 'api/video/video_question',
                method: 'put',
                data: {
                    id: this.question_id,
                    comment: this.editWords
                },
                func: {
                    success: success
                }
            });
        },
        delQuestion(item) {
            this.$confirm('确定要删除这问题吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                .then(() => {
                    let success = res => {
                        // console.log(res);
                        this.getPersonQuestion();
                        this.getAllQuestion();
                        this.$message.success('删除成功');
                    };
                    this.$ajax({
                        url: 'api/video/video_question',
                        method: 'delete',
                        params: {
                            id: item.id
                        },
                        func: {
                            success: success
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        // 笔记列表/答疑列表的查看图片
        seePic(item) {
            this.dialogPicVisible = true;
            this.see_image = item.video_image;
        },
        //右边栏下载按钮：
        downLoadFile() {
            if (this.user_login_id == 0) {
                this.$message.warning('先登陆个人账号，才能进行此操作哦~');
                return;
            }
            window.location.href = this.BASE_URL + '/index/openclass/videodownload?id=' + this.videoid + '&type=0&userid=' + this.user_login_id;
            //添加下载数
            this.addDownLoadCount();
        },
        //添加下载数
        addDownLoadCount() {
            let success = data => {
                // 课程介绍里展示了下载数量，此处调用父组件的方法重新刷新下载数量
                this.$parent.getIntroduction();
            };
            this.$ajax({
                url: 'index/resource/add_download_nums',
                method: 'post',
                data: {
                    id: this.videoid,
                    type: 0,
                    userid: this.user_login_id
                },
                func: {
                    success: success
                }
            });
        },
    }
};
</script>
<style lang="scss">

.video-sidebar-box {
    position: absolute;
    top: 0;
    right: -420px;
    z-index: 10;
    height: 100%;
    transition: right 500ms;
    &.Side-active {
        right: 0px;
    }
    .video-sidebar {
        width: 60px;
        height: 100%;

        .video-sidebar-btn {
            position: absolute;
            top: 30%;

            div {
                padding: 15px 0 8px;
                background-color: #494f6a;
                color: #7a819a;
                width: 60px;
                text-align: center;
                margin-bottom: 5px;
                cursor: pointer;

                p {
                    font-size: 1rgb (74, 78, 94);
                    margin-top: 10px;
                }
            }

            div:hover {
                color: #a3afe8;
                background-color: #575e7e;
            }

            .bar-active {
                color: #a3afe8;
                background-color: #575e7e;
            }

            .videodownload:hover>i {
                background-position: -807px -153px;
            }
        }
    }
    .sectionLs {
        padding: 10px;
    }

    .sectionLs>p {
        display: block;
        float: left;
    }

    .sectionLs>p:nth-of-type(1) {
        width: 170px;
        height: 108px;
        border: 1px solid #e0e0e0;
    }

    .sectionLs>p:nth-of-type(1)>img {
        width: 100%;
        height: 100%;
    }

    .sectionLs>p:nth-of-type(2) {
        margin-left: 20px;
        font-size: 14px;
        line-height: 19px;
        max-width: 200px;
    }

    .sectionLs:hover {
        cursor: pointer;
        box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.1);
    }

    .sectionLs:hover>p {
        color: #348efc;
    }

    .sectionLs .c-active {
        color: #348efc;
    }

    .common-bar {
        .question-bar-input {
            border-bottom: 1px solid #dcdfe6;
        }

        .el-tabs__header {
            margin: 0;
        }

        .el-tabs__item {
            width: 210px;
            padding: 0;
            text-align: center;
        }

        .el-tabs__item.is-active {
            background-color: #a8ecfd;
        }

        .el-tabs__active-bar {
            display: none;
        }

        .textarea {
            margin: 20px 10px;
            position: relative;

            .numberWord {
                position: absolute;
                bottom: 10px;
                right: 10px;
            }
        }

        .cut-img {
            padding: 0 10px 20px;
            border-bottom: 1px solid #dcdfe6;
        }

        .but_addamage {
            margin-right: 10px;
        }

        .el-button {
            width: 80px;
        }

        .question-div {
            overflow-y: scroll;
        }

        .preson-question {
            height: 550px;
        }

        .all-question {
            height: 738px;
        }

        .comment-li-item {
            padding: 20px 0;
            margin: 0 20px;
            border-bottom: 1px solid #e0e0e0;

            a {
                display: block;
                float: left;
                width: 42px;
                height: 42px;
                border-radius: 50%;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                    vertical-align: top;
                }
            }
        }

        .comment-li-box {
            float: none;
            margin-left: 60px;

            .comment-user {
                color: #666;
            }

            .textarea {
                margin: 20px 0;
            }
        }

        .comment-content {
            font-size: 14px;
            line-height: 21px;
            margin-bottom: 15px;
            word-wrap:break-word
        }

        .comment-li-area {
            padding-bottom: 20px;
        }

        .img-card {
            position: relative;
            margin-bottom: 10px;

            .el-card__body {
                height: 100px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .tips-word {
            visibility: hidden;
            opacity: 0;
            width: 100%;
            height: 140px;
            line-height: 140px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(144, 147, 153, 0.5);
            text-align: center;

            span {
                padding: 20px;
                font-size: 20px;
                font-weight: 600;
                letter-spacing: 5px;
                border: 2px dashed #fff;
                color: #fff;
                cursor: pointer;
            }
        }

        .img-card .el-card__body:hover>.tips-word {
            visibility: visible;
            opacity: 1;
        }

        .comment-btns-tool {
            span {
                color: #2f6d8c;
            }

            i {
                cursor: pointer;
                margin-left: 15px;
                visibility: hidden;
            }
        }
        .video-cut-time{
            display: inline-block;
            padding: 5px;
            margin-bottom: 10px;
            border-radius: 2px;
            color: #fff;
            background-color:#b9b9b9;
        }
        .comment-li-box:hover>.comment-btns-tool>i {
            visibility: visible;
        }

        .reply-tips {
            padding-top: 20px;
            box-sizing: border-box;

            span {
                display: block;
                padding: 10px 0;
                // color: #666;
                color: #348efc;
            }

            .role1 {
                color: #348efc;
            }
        }
    }

    .seePicDialog {
        .el-dialog__header {
            padding: 0;
        }

        .el-dialog__body {
            text-align: center;
        }

        .el-dialog__headerbtn {
            border-radius: 50%;
            top: -12px;
            right: -12px;
            padding: 3px;
            background-color: #fff;

            .el-dialog__close {
                padding: 3px;
                border-radius: 50%;
                background-color: #666;
                color: #fff;
            }

            .el-dialog__close:hover {
                background-color: #409eff;
            }
        }
    }
    .cuts-part {
        height: 100%;
    }

    .video-sidebar-con {
        width: 420px;
        background: #ffffff;
        height: 100%;
        position: relative;
        overflow: hidden;
        box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.1);
    }

}

</style>
